.corner {
    @size: 12px;
    content: '';
    display: inline-block;
    position: absolute;
    width: @size;
    height: @size;
    background-color: currentColor;
    transform: rotate(45deg);
}

.icon() {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: all 0.2s ease-out;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.wdu-icon-scaleDown {
    .icon();
    background-image: url('@/icon/scaleDown.svg');
}

.wdu-icon-scaleUp {
    .icon();
    background-image: url('@/icon/scaleUp.svg');
}

.wdu-icon-full {
    .icon();
    background-image: url('@/icon/full.svg');
}

.wdu-icon-reset {
    .icon();
    background-image: url('@/icon/reset.svg');
}

.wdu-icon-close {
    .icon();
    background-image: url('@/icon/close.svg');
}

.wdu-icon-rotate-right {
    .icon();
    background-image: url('@/icon/rotate-right.svg');
}

.wdu-icon-rotate-left {
    .icon();
    background-image: url('@/icon/rotate-left.svg');
}

.wdu-icon-search {
    .icon();
    background-image: url('@/icon/search.svg');
}

.wdu-icon-caret-right {
    .icon();
    background-image: url('@/icon/caret-right.svg');
}

.wdu-icon-caret-left {
    .icon();
    background-image: url('@/icon/caret-right.svg');
    transform: rotate(-180deg);
}

.wdu-icon-caret-down {
    .icon();
    background-image: url('@/icon/caret-right.svg');
    transform: rotate(90deg);
}

.wdu-icon-caret-up {
    .icon();
    background-image: url('@/icon/caret-right.svg');
    transform: rotate(-90deg);
}

.wdu-icon-loading {
    .icon();
    background-image: url('@/icon/loading.svg');
    animation: rotate 1s infinite ease-out;
}
